<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>公众号列表</span>
    </div>
    <div class="home-container">

      <v-searchForm
        :form-data="filter_info"
        :form-title="formTitle"
        @search="search"
        @reset="reset"
      />

      <v-tableBtns
        :show-upload="true"
        :show-create="true"
        :table-title="tableTitle"
        :table-data="tableData"
        @addNew="addNew"
      />

      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        @edit="edit"
        @del="del"
      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />

    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'Home',
  components: { UploadExcelComponent },
  data() {
    return {
      onFilter: false,
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },
      formTitle: [
        {
          cn: 'id：',
          en: 'id'
        },
        {
          cn: '公众号名称：',
          en: 'mpsname'
        },
        {
          cn: '类别分组：',
          en: 'group_id',
          type: 'select',
          list: [
            {
              label: '自营账号',
              value: 1
            },
            {
              label: '媒介账号',
              value: 2
            },
            {
              label: '城觅抖音',
              value: 3
            }
          ]
        },
        {
          cn: '粉丝数量：',
          en: 'fans_total',
          type: 'range',
          dataName: { min: 'fansMin', max: 'fansMax' }
        }
      ],
      filter_info: {},
      tableTitle: [
        {
          cn: 'id',
          en: 'mpsid'
        },
        {
          cn: '公众号',
          en: 'mpsname'
        },
        {
          cn: 'logo',
          en: 'logoname',
          type: 'img'
        },
        {
          cn: '所属公司',
          en: 'name'
        },
        {
          cn: '分组',
          en: 'group'
        },
        {
          cn: '订单数量',
          en: 'order_total'
        },
        {
          cn: '粉丝数量',
          en: 'fans_total'
        },
        {
          cn: '接入类型',
          en: 'insert_type'
        },
        {
          cn: '创建时间',
          en: 'created_at'
        }
      ],
      tableData: []

    }
  },
  created() {
    this.getTableList()
  },
  methods: {

    // 获取公众号列表
    getTableList(data) {
      let datas
      if (this.onFilter) {
        datas = { ...data, filter_info: this.filter_info }
      } else {
        datas = data
      }
      this.$get('action/WechatNumber/dataGrid', datas)
        .then(res => {
          const list = res.data.list.map((item, index) => {
            switch (item.group_id) {
              case 1:
                item.group = '自营账号'
                break
              case 2:
                item.group = '媒介账号'
                break
              case 3:
                item.group = '城觅抖音'
                break
            }
            switch (item.type) {
              case 0:
                item.type = '手动输入'
                break
              case 1:
                item.type = '授权接入'
                break
            }
            return item
          })
          this.pageInfo.totalPage = res.data.totalPage
          this.pageInfo.totalRow = res.data.totalRow

          this.tableData = list || []
        })
    },

    // 搜索
    search() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (origin[key] && key !== 'created_at') {
          data[key] = origin[key]
        } else if (key === 'created_at') {
          data.startDate = origin[key][0]
          data.endDate = origin[key][1]
        }
      }

      this.onFilter = true
      this.filter_info = data
      this.getTableList()
    },

    reset() {
      this.onFilter = false

      this.filter_info = {}

      this.getTableList()
    },

    del(val) {
      console.log(val)
    },
    edit(val) {
      const id = val.row.mpsid
      this.$router.push({
        name: 'tencent_list.tencent_create',
        query: { id },
        params: {
          details: val.row
        }
      })
    },
    addNew() {
      this.$router.push({
        name: 'tencent_list.tencent_create'
      })
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
    .table-menu {
        padding-bottom: 15px;
    }

</style>
